/**
 * @author:linjiye
 * @date:2025/1/5
 * @desc:
 **/

import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React, {useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import FcTextInput from "@/components/FcTextInput";
import PageTabBar from "@/components/PageTabBar";
import KeywordHighlighter from "@/components/KeywordHighlighter";
import NoData from "@/components/NoData";
import FcButton from "@/components/FcButton";
import {useRouter} from "expo-router";
import FormTitle from "@/components/FormTitle";
import {Flex} from "@ant-design/react-native";
import FcModal from "@/components/FcModal";

type Props = {}

const productNameList = (props: Props) => {
    const router = useRouter();
    const [searchText, setSearchText] = useState('')
    const [list, setList] = useState([
        {
            title: '全屋定制衣柜',
            id: 1,
        },{
            title: '全屋定制衣柜',
            id: 2,
        },{
            title: '全屋定制衣柜',
            id: 3,
        },{
            title: '全屋定制衣柜',
            id: 4,
        },{
            title: '全屋定制衣柜',
            id: 5,
        },{
            title: '全屋定制衣柜',
            id: 6,
        },{
            title: '全屋定制衣柜',
            id: 7,
        },{
            title: '全屋定制衣柜',
            id: 8,
        },{
            title: '全屋定制衣柜',
            id: 9,
        },{
            title: '全屋定制衣柜',
            id: 10,
        },{
            title: '全屋定制衣柜',
            id: 11,
        }
    ])
    const [isAdd,setIsAdd] = useState(false)
    const [typeList, setTypeList] = useState([
        {
            name: '提供产品',
            id: 1,
        },{
            name: '提供服务',
            id: 2,
        },{
            name: '经营场景',
            id: 3,
        }
    ])
    const [typeId, setTypeId] = useState(typeList[0]?.id)
    const [groupName, setGroupName] = useState('')

    const handleType = (val) => {
        setTypeId(val.id)
    }

    return (
        <PageScrollView
            pageTab={
                <PageTabBar
                    style={{marginVertical: 10}}
                    title={'产品名称'}
                    right={
                        <View style={{flexDirection: 'row'}}>
                            {list?.length > 0 &&
                                <TouchableOpacity style={{marginRight: 4}} onPress={() => router.push('/aiFeeding/editProductName')}>
                                    <Text style={styles.tabBar_btn}>编辑</Text>
                                </TouchableOpacity>
                            }
                            <TouchableOpacity onPress={() => setIsAdd(true)}>
                                <Text style={styles.tabBar_btn}>新增产品</Text>
                            </TouchableOpacity>
                        </View>

                    }
                />
            }
            pageHeader={
                <FcTextInput type='search' text={searchText} placeholder={'请输入要搜索的内容'}
                             onChangeText={setSearchText}
                             style={{margin: 16}}
                             inputStyle={{backgroundColor:'white'}}
                             height={40}/>
            }
        >
            <View>
                <View style={styles.search_item_wrap}>
                    <KeywordHighlighter
                        text="全屋定制"
                        keywords=""
                        textStyle={styles.search_text}
                        textHeightLightStyle={{color: '#2856FF'}}
                    />
                </View>
                {/*{list?.map((item, index) => (*/}
                {/*    <TouchableOpacity>*/}
                {/*        <View style={styles.search_item_wrap}>*/}
                {/*            <KeywordHighlighter*/}
                {/*                text={item.title}*/}
                {/*                keywords={searchText}*/}
                {/*                textStyle={styles.search_text}*/}
                {/*                textHeightLightStyle={{color: '#2856FF'}}*/}
                {/*            />*/}
                {/*            <Text>(123)</Text>*/}
                {/*        </View>*/}
                {/*    </TouchableOpacity>*/}
                {/*))}*/}
                {list?.length > 0 &&
                    <View style={{
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        paddingTop: 60,
                        paddingBottom: 120
                    }}>
                        <NoData hintText='暂无分组'/>
                        <TouchableOpacity onPress={() => setIsAdd(true)}>
                            <FcButton
                                type='BjJB'
                                colors={['#6989FF', '#C65EFD']}
                                style={{width: 74, height: 32, justifyContent: 'center'}}
                                itemStyle={{borderRadius: 8}}
                                textName='去新增'></FcButton>
                        </TouchableOpacity>
                    </View>
                }
            </View>

            <FcModal
                isOpen={isAdd}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsAdd(false)}
                style={styles.modal_default}
                titleText={'新增产品'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setIsAdd(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => setIsAdd(false),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 20}}>
                    <FormTitle style={{paddingTop: 0}} isLeftIcon title='选择类目' />
                    <Flex wrap='wrap' style={styles.type_menu}>
                        {typeList?.map((item, index) =>
                            <TouchableOpacity key={index} onPress={() => handleType(item)}>
                                <FcButton
                                    type={typeId === item.id ? 'txtBK' : 'default'}
                                    style={[styles.type_menu_item]}
                                    itemStyle={{width: '100%', height: '100%'}}
                                    textName={item.name} borderWidth={1}></FcButton>
                            </TouchableOpacity>
                        )}
                    </Flex>
                    <FcTextInput text={groupName} placeholder={'请输入产品名称'}
                                 onChangeText={setGroupName}
                                 height={56}/>
                </View>
            </FcModal>
        </PageScrollView>
    )
}

export default productNameList

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        borderRadius: 8,
        paddingHorizontal: 16,
    },
    tabBar_btn: {
        width: 64,
        height: 28,
        display: 'flex',
        justifyContent: "center",
        alignItems: "center",
        fontSize: 12,
        color: '#2856FF',
        borderRadius: 8,
        backgroundColor: 'white'
    },
    search_item_wrap: {
        flexDirection: 'row',
        minHeight: 56,
        display: 'flex',
        alignItems: "center",
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)',
    },
    search_text: {
        color: 'rgba(0, 0, 0, 0.9)'
    },
    modal_default: {
        width: 280,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
    },

    type_menu: {
        display: "flex",
        flexWrap: "wrap",
        flexDirection: "row",
        marginLeft: -3,
        marginBottom: 16
    },
    type_menu_item: {
        width: 78,
        height: 40,
        lineHeight: 40,
        borderRadius: 8,
        marginHorizontal: 3,
        marginBottom: 6
    },
})